<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      ref="crud"
      v-model="form"
      @row-del="rowDel"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @current-change="currentChange"
      @size-change="sizeChange"
      @on-load="onLoad"
    >
      <template slot-scope="{ type, size, row, index }" slot="menu">
        <el-button
          icon="el-icon-edit"
          :size="size"
          :type="type"
          @click.stop="editorInfo(row, index)"
          >编 辑</el-button
        >
        <el-button
          icon="el-icon-delete"
          :size="size"
          :type="type"
          @click="rowDel(row)"
          >删 除</el-button
        >
      </template>
      <template slot="remarkForm">
        <el-row>
          <tinymce-editor v-model="remark" ref="editor"></tinymce-editor>
        </el-row>
      </template>
      <template slot-scope="scope" slot="remark">
        <span>{{ scope.row.remark }}</span>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import {
  getEInquiryList,
  addEInquiryItem,
  updateEInquiryItem,
  deleteEInquiryItem,
  getExpertList,
} from "@/api/expert/list";
import { getCategoryList } from "@/api/expert/categories";
import TinymceEditor from "@/components/tinymce-editor/tinymce-editor.vue";

export default {
  data() {
    return {
      imageUrl: "",
      loading: true,
      form: {},
      dialogFormVisible: false,
      articleFullscreen: false,
      query: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      option: {
        border: true,
        align: "left",
        menuAlign: "center",
        addBtn: true,
        columnBtn: false,
        refreshBtn: false,
        editBtn: false,
        delBtn: false,
        column: [
          {
            label: "序号",
            prop: "sort",
            type: "number",
            rules: [
              {
                required: true,
                message: "请输入排序",
                trigger: "blur",
              },
            ],
          },
          {
            label: "姓名",
            prop: "expertInquiryName",
            type: "select",
            dicUrl:
              "/api/blade-user/findTenantPostList?tenantId=760859&category=6",
            //760859
            //271120
            props: {
              label: "realName",
              value: "realName",
            },
            rules: [
              {
                required: true,
                message: "请输入姓名",
                trigger: "blur",
              },
            ],
          },
          {
            label: "头像",
            prop: "headPortrait",
            type: "upload",
            listType: "picture-img",
            tip: "请上传 .png,.jpg 格式图片",
            action: "/api/blade-file/file/uploadFile",
            propsHttp: {
              res: "data",
              url: "fileUrl",
            },
            span: 24,
            row: true,
          },
          {
            label: "擅长",
            prop: "expertCategoryId",
            type: "tree",
            // dicUrl: "/api/blade-measure/measure/projectgaugetype/query",
            dicUrl: "/api/blade-expert/eCategory/select",
            multiple: true,
            dataType: "string",
            props: {
              // label: "typeName",
              // value: "projectGaugeTypeId",
              label: "expertCategoryName",
              value: "id",
            },
            rules: [
              {
                required: true,
                message: "请选择擅长类别",
                trigger: "click",
              },
            ],
          },
          {
            label: "资质",
            prop: "qualifications",
            rules: [],
            editDisplay: false,
            addDisplay: false,
          },
          {
            label: "咨询价格",
            prop: "consultFee",
            rules: [],
          },
          {
            label: "个人语录",
            prop: "expertIntroduce",
            editDisplay: false,
            addDisplay: false,
            // type: "textarea",
          },
          // {
          //   label: "微信二维码",
          //   prop: "WechatCode",
          //   type: "upload",
          //   listType: "picture-img",
          //   tip: "请上传 .png,.jpg 格式图片",
          //   action: "/api/blade-file/file/uploadFile",
          //   propsHttp: {
          //     res: "data",
          //     url: "fileUrl",
          //   },
          //   span: 24,
          //   row: true,
          // },

          // {
          //   label: "模块名称",
          //   prop: "expertModuleId",
          //   type: "tree",
          //   dicUrl: "/api/blade-expert/expertModel/select",
          //   props: {
          //     label: "expertModuleName",
          //     value: "id"
          //   },
          //   search: false,
          //   rules: [
          //     {
          //       required: true,
          //       message: "请选择所属模块",
          //       trigger: "click"
          //     }
          //   ]
          // },
          {
            label: "简介",
            prop: "remark",
            type: "textarea",
            span: 24,
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入简介",
                trigger: "blur",
              },
            ],
          },
          {
            label: "显示",
            prop: "state",
            type: "select",
            dicData: [
              {
                label: "显示",
                value: 1,
              },
              {
                label: "不显示",
                value: 2,
              },
            ],
            rules: [
              {
                required: true,
                message: "请选择是否展示",
                trigger: "blur",
              },
            ],
          },
        ],
      },
      data: [],
      expertList: [],
      userId: "",
      categoryList: [],
      remark: "",
    };
  },
  watch: {
    "form.expertInquiryName"(val) {
      if (val !== undefined && val !== null) {
        this.expertList.forEach((item) => {
          if (item.realName == val) {
            this.form.userId = item.id;
          }
        });
      }
    },
    "form.expertCategoryId"(val) {
      if (!val) return;
      let list = [];
      if (val.indexOf(",") > -1) {
        list = val.split(",");
      } else {
        list.push(val);
      }
      let expertCategoryName = [];
      this.categoryList.forEach((item) => {
        list.forEach((item2) => {
          if (item2 == item.id) {
            expertCategoryName.push(item.expertCategoryName);
          }
        });
      });
      this.form.expertCategoryName = expertCategoryName.join(",");
    },
    remark: {
      handler(val) {
        //监听指导语数据变化，否则过不了校验
        this.form.remark = val;
      },
      immediate: true,
    },
  },
  created() {
    getExpertList().then((res) => {
      this.expertList = res.data.data;
    });
    getCategoryList().then((res) => {
      this.categoryList = res.data.data.records;
    });
  },
  mounted() {
    let remark = "";
    this.str = this.escapeStringHTML(remark);
  },
  methods: {
    rowSave(row, done, loading) {
      //新增
      row.remark = this.remark;
      addEInquiryItem(row).then(
        () => {
          done();
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
    },
    editorInfo(row, index) {
      this.remark = row.remark;
      this.$refs.crud.rowEdit(row, index);
    },
    rowUpdate(row, index, done, loading) {
      //修改
      row.hits = 300;
      row.remark = this.remark;
      // this.remark = row.remark;
      updateEInquiryItem(row).then(
        () => {
          done();
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
    },
    rowDel(row) {
      //删除
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return deleteEInquiryItem(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
    currentChange(currentPage) {
      //分页页码
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      //分页条数
      this.page.pageSize = pageSize;
    },
    onLoad(page, params = {}) {
      //调用接口初始化
      this.loading = true;
      getEInquiryList(page.currentPage, page.pageSize, { state: 1 }).then(
        (res) => {
          this.data = res.data.data.records;
          this.page.total = res.data.data.total;
          this.loading = false;
        }
      );
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    escapeStringHTML(str) {
      //把实体格式字符串转义成HTML格式的字符串
      str = str.replace(/&lt;/g, "<");
      str = str.replace(/&gt;/g, ">");
      return str;
    },
  },
  components: {
    TinymceEditor,
  },
};
</script>

<style scoped>
.preview {
  min-height: 150px;
}

/deep/ .el-dialog__header {
  padding: 16px 24px;
  min-height: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.articleForm .el-select,
.articleForm .el-input {
  width: 360px;
}

.ueditor-wrap {
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
